<template>
	<view class="">
		<view class="notice_card" v-for="(item,index) in notice" :key="item.id" @click="toPage(item,index)">
			<view class="card_left">
				<image :src="item.img"  ></image>
			</view>
			<view class="card_middle">
				<view class="middle_name">{{item.name}}</view>
				<view class="middle_place">{{item.place}} | {{item.type}}</view>
				<image src="/static/img/place.png"  ></image>
				<view class="middle_address">{{item.address}}</view>
			</view>
			<view class="card_right">
				<view class="right_km">{{item.distance}}km</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			notice: {
				type: Array,
				default: []
			},
			current: {
				type: Number,
				default: 0,
			},
		},
		mounted() {
			// console.log(this.notice, 'notice');
			// console.log('current', this.current);
		},
		methods: {
			// 页面跳转
			toPage(item,index){
				this.$emit('jumpDetail',item,index)
			},
		},
		watch: {
		}
	};
</script>

<style scoped lang="scss">
	.card {
		display: inline-block;
	}

	.notice_card+.notice_card {
		margin-top: 24rpx;
	}

	.notice_card {
		position: relative;
		display: flex;
		justify-content: flex-start;

		.card_left {

			// padding: 24rpx 0 24rpx 30rpx;
			image {
				width: 148rpx;
				height: 148rpx;
				border-radius: 8rpx;
			}
		}

		.card_middle {
			padding: 8rpx 0 0 16rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.middle_address {
				display: inline-block;
			}

			.middle_name {
				font-weight: 600;
				color: #333;
				width: 450rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.middle_place {
				font-size: 24rpx;
				color: #333;
				padding-top: 24rpx;
			}

			.middle_address {
				width: 318rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 20rpx;
				padding: 24rpx 0 0 8rpx;
				color: #999;
			}
		}

		.card_right {
			padding: 120rpx 0 0 121rpx;
			color: #333;
			font-size: 20rpx;
			position: absolute;
			bottom: 32rpx;
			right: 30rpx;
			.right_km {
				// text-align: right;
			}
		}
	}
</style>
